import React, {useReducer} from 'react'
import SearchForm from '@/components/SearchForm'
import {Button, Card, DatePicker, Form, Select, Table} from 'antd'
import useRefHeight from "@/hooks/useRefHeight.ts";
import useScrollHeight from "@/hooks/useScrollHeight.ts";
import RegionCascader from "@/components/RegionCascader";
import useRegions from "@/hooks/useRegions.ts";
import useSearchTable from "@/hooks/useSearchTable.ts";
import {EmergencyLevelMap, StatusFlagMap} from "@/enums/emergency/map";
import {getEmergencyPage} from "@/services/emergency";
import DisposalAssessment from "@/pages/emergency/disposal/DisposalAssessment";


const {useForm} = Form
const Scenic: React.FC = () => {
  const [form] = useForm()
  const [regions] = useRegions();

  const [disposalData, dispatchDisposalData] = useReducer(
    (state: any, {clear, ...action}: any) => {
      return clear ? {
        title: '应急事件评估',
        ...action
      } : {
        ...state,
        ...action
      }
    },
    {
      title: '应急事件评估',
      open: false,
    }
  )
  const {
    search,
    refresh,
    getOrder,
    tableProps
  } = useSearchTable((params: any) => {
    return getEmergencyPage(params)
  }, form)

  const columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (_: any, __: any, index: number) => getOrder(index)
    },
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
      width: 250,
    },
    {
      title: '行政区划',
      dataIndex: 'zoneCodeName',
      key: 'zoneCodeName',
      width: 200,
    },
    {
      title: '类型',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '等级',
      dataIndex: 'level',
      key: 'level',
      width: 100,
      render(value: any) {
        return EmergencyLevelMap.getName(value);
      },
    },
    {
      title: '地点',
      dataIndex: 'zoneCodeName',
      key: 'zoneCodeName',
      width: 250,
    },
    {
      title: '简要描述',
      dataIndex: 'name',
      key: 'name',
      width: 250,
    },
    {
      title: '发生时间',
      dataIndex: 'emergencyTime',
      key: 'emergencyTime',
      width: 150,
    },
    {
      title: '当前状态',
      dataIndex: 'statusFlag',
      key: 'statusFlag',
      align: 'center',
      width: 150,
      render(value: any) {
        return StatusFlagMap.getName(value);
      },
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      width: 100,
      align: 'center',
      fixed: 'right',
      render(emergencyId: any) {
        return (
          <div>
            <Button type='link' onClick={() => {
              dispatchDisposalData({
                open: true,
                emergencyId
              })
            }}>评估</Button>
          </div>
        );
      },
    },
  ]

  // 动态计算表格高度
  const [searchFormRef, searchFormHeight, refreshHeight] = useRefHeight();
  const [toolbarRef, toolbarHeight] = useRefHeight();
  const scrollHeight = useScrollHeight({
    pagination: true,
    tableHead: true,
    deps: [searchFormHeight, toolbarHeight]
  });
  return (
    <div>
      <div className="pb-[12px]" ref={searchFormRef}>
        <Card>
          <SearchForm form={form} onReset={search} onFinish={search} onResize={() => refreshHeight()}>
            <Form.Item name="province" label="类型">
              <Select placeholder="类型"/>
            </Form.Item>
            <Form.Item name="level" label="等级">
              <Select
                placeholder="等级"
                options={EmergencyLevelMap.toOption()}
                allowClear
              />
            </Form.Item>
            <Form.Item label='行政区划' name='area'>
              <RegionCascader placeholder="请选择行政区划" options={regions} onChange={search}/>
            </Form.Item>
            <Form.Item name="date" label="发生时间">
              <DatePicker.RangePicker format="YYYY-MM-DD"/>
            </Form.Item>
          </SearchForm>
        </Card>
      </div>
      <Card>
        <div className="pb-[8px]" ref={toolbarRef}></div>
        <Table
          columns={columns}
          rowKey="id"
          scroll={{y: scrollHeight}}
          {...tableProps}
        />
      </Card>
      <DisposalAssessment
        {...disposalData}
        dispatch={dispatchDisposalData}
        bodyStyle={{height: '600px', overflowY: 'auto'}}
        onSuccess={() => {
          refresh()
        }}
        width={1000}
      />

    </div>
  )
}

export default Scenic
